<template>
  <footer class="footer">
    <div class="footer-content">
      <div class="icon-email">
        <svg t="1713604287238" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2956" width="20" height="20">
          <path
            d="M838.954667 234.666667H170.666667c-3.626667 0-7.168 0.448-10.56 1.322666l323.690666 323.669334a21.333333 21.333333 0 0 0 30.165334 0L838.954667 234.666667z m46.144 14.186666l-260.693334 260.693334 262.933334 262.912c5.44-7.168 8.661333-16.106667 8.661333-25.792V277.333333c0-10.944-4.117333-20.906667-10.88-28.48zM843.861333 789.333333l-249.6-249.621333-50.133333 50.133333a64 64 0 0 1-90.517333 0l-50.112-50.133333L156.373333 786.88c4.48 1.578667 9.28 2.453333 14.314667 2.453333h673.194667zM128.661333 754.218667L373.333333 509.525333 129.578667 265.813333A42.709333 42.709333 0 0 0 128 277.333333v469.333334c0 2.56 0.213333 5.098667 0.661333 7.552zM170.666667 192h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v469.333334a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V277.333333a85.333333 85.333333 0 0 1 85.333334-85.333333z"
            fill="#ffffff" p-id="2957"></path>
        </svg>
        <p>Email: <a href="mailto:hello@ondasurf.com">hello@ondasurf.com</a></p>
      </div>
      <div class="icon-phone">
        <svg t="1713618514543" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2357" width="20" height="20">
          <path
            d="M941.800727 429.381818L547.002182 83.712a60.834909 60.834909 0 0 0-80.011637 0L72.192 429.405091a50.850909 50.850909 0 0 0-14.196364 56.506182A50.827636 50.827636 0 0 0 105.890909 518.981818h43.101091v442.181818h716.008727v-442.181818h43.101091c21.504 0 40.308364-13.009455 47.895273-33.093818a50.850909 50.850909 0 0 0-14.196364-56.506182z m-140.8 467.828364H212.992V519.307636h588.008727v377.902546zM212.992 518.981818v-63.697454h588.008727V518.981818H212.992z m652.008727-64H140.101818L506.996364 133.794909 873.890909 455.005091h-8.890182z"
            fill="#FFFFFF" p-id="2358"></path>
          <path
            d="M358.4 685.893818h-76.101818c-13.986909 0-25.390545-11.403636-25.390546-25.390545v-76.101818c0-14.010182 11.403636-25.390545 25.390546-25.390546h76.101818c14.010182 0 25.390545 11.403636 25.390545 25.367273v76.101818c0 14.010182-11.403636 25.413818-25.390545 25.413818z m-61.393455-39.982545h46.778182v-46.801455h-46.778182v46.778182z m61.393455 201.495272h-76.101818c-13.986909 0-25.390545-11.403636-25.390546-25.413818v-76.101818c0-13.986909 11.403636-25.390545 25.390546-25.390545h76.101818c14.010182 0 25.390545 11.403636 25.390545 25.390545v76.101818c0 14.010182-11.403636 25.413818-25.390545 25.413818z m-61.393455-40.005818h46.778182v-46.801454h-46.778182v46.801454z m248.99491 40.005818h-76.008728c-13.986909 0-25.390545-11.403636-25.390545-25.413818v-76.101818c0-13.986909 11.403636-25.390545 25.390545-25.390545h76.008728c14.010182 0 25.390545 11.403636 25.390545 25.390545v76.101818c0 14.010182-11.403636 25.413818-25.390545 25.413818z m-61.393455-40.005818h46.778182v-46.801454h-46.778182v46.801454z"
            fill="#FFFFFF" p-id="2359"></path>
        </svg>
        <p>Phone: <span>+62 312 000 256</span></p>
      </div>
      <div class="icon-address">
        <svg t="1713618691875" class="icon3" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6884" width="20" height="20">
          <path
            d="M605.172401 55.840585V8.818159A511.732431 511.732431 0 0 1 1015.112098 418.80439H968.136206A465.803549 465.803549 0 0 0 605.172401 55.840585z m0 152.025994V158.354593A372.549772 372.549772 0 0 1 848.916556 418.80439h-47.999636A326.178819 326.178819 0 0 0 605.172401 207.913113zM218.662483 418.292518a2.908364 2.908364 0 0 0 0-0.442072A45.510077 45.510077 0 0 1 209.634922 418.80439a46.533821 46.533821 0 0 1 0-93.067642 116.334553 116.334553 0 1 0-116.334553-116.334553 103.770421 103.770421 0 0 0 2.978165 23.26691h4.653382c-0.628207 4.048442-0.953943 8.166686-1.512349 12.238395 0 0.186135 0 0.395537 0.162868 0.60494A577.019382 577.019382 0 0 0 93.300369 325.736748c0 20.125878 1.093545 39.972552 3.001432 59.586558l-0.232669-0.186136a604.939674 604.939674 0 0 0 542.584354 542.53782c19.590739 1.907887 39.414146 3.001431 59.49349 3.001432h0.860876a580.695553 580.695553 0 0 0 79.456499-6.258799A114.705869 114.705869 0 0 0 814.574596 930.676422a116.334553 116.334553 0 1 0-116.334552-116.334553 46.533821 46.533821 0 0 1-93.067643 0 45.323942 45.323942 0 0 1 0.90741-8.95776 2.908364 2.908364 0 0 0-0.442071 0 210.542274 210.542274 0 1 1 162.403035 212.892231v2.000954c-23.034241 2.326691-46.39422 3.53657-70.0334 3.536571a698.007316 698.007316 0 0 1-698.007317-698.007317 653.102179 653.102179 0 0 1 4.886051-74.337779 209.21606 209.21606 0 1 1 213.776374 166.870283z"
            fill="#FFFFFF" p-id="6885"></path>
        </svg>
        <p>Address: <span>Green Bowl Beach, Canggu, Bali</span><span>mon-Sun 07:00-21:00</span></p>
      </div>
  
      <nav class="footer-nav">
        <ul>
          <a href="#">Home</a>
          <a href="#">About Us</a>
          <a href="#">Courses</a>
          <a href="#">Blog</a>
          <a href="#">Contact</a>
        </ul>
      </nav>
      <button class="to-top-button" @click="scrollToTop">TO THE TOP</button>
      <div class="footer-copyright">
        <p class="copyright-text">&copy; Onda Surf School 2020</p>
      </div>
    </div>
 
  </footer>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// 定义一个滚动到顶部的方法
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
onMounted(() => {
  scrollToTop();
});
defineExpose({ scrollToTop });
</script>
<style scoped>
.footer {
  width: 100%;
  background-color: #333;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  box-sizing: border-box; 
  position: absolute;
  left: 0;

}


.footer-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}

.contact-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}

.icon-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.icon1,
.icon2,
.icon3 {
  fill: currentColor;
  height: 1.5em; 
  width: 1.5em; 
}

.footer-content p,
.contact-info a {
  margin: 0;
  color: #ddd;
}

.contact-info a {
  color: #007bff;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

.to-top-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-bottom: 1em; 
}

.to-top-button:hover {
  background-color: #0056b3;
}

.footer-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-nav li a {
  color: #ddd;
  text-decoration: none;
  padding: 0.5em; 
}

.footer-nav li a:hover {
  text-decoration: underline;
}

.copyright-text {
  margin-top: 1em;
}

/* 响应式设计调整 */
@media (max-width: 768px) {
  .footer-content {
    align-items: center;
    text-align: center;
  }

  .contact-icons {
    align-items: center;
  }

  .footer-nav ul {
    flex-direction: column;
    align-items: center;
  }

  .footer-nav li {
    margin-bottom: 0.5em; 
  }

  .footer-nav li:not(:last-child)::after {
    content: '|';
    margin-left: 1em;
  }

  .to-top-button {
    margin-top: 1em; 
  }
}
</style>